CSS @extend: स्टाईल इनहेरिटन्स आणि एक्सटेंशनमध्ये प्रभुत्व

CSS, स्टाईलची भाषा, आपल्याला वेब पेजेसचे दृश्य स्वरूप घडवण्यास सक्षम करते. जसजसे प्रकल्प गुंतागुंतीचे होत जातात, तसतसे एक सुसंगत आणि कार्यक्षम स्टाईलशीट राखणे महत्त्वाचे ठरते. Sass आणि Less सारखे CSS प्रीप्रोसेसर ही प्रक्रिया सुलभ करण्यासाठी शक्तिशाली वैशिष्ट्ये देतात. असेच एक वैशिष्ट्य म्हणजे @extend, जे एका CSS नियमामधून दुसऱ्या नियमात स्टाईल्स इनहेरिट (वारसा हक्काने घेणे) आणि एक्सटेंड (विस्तारित) करण्याची एक यंत्रणा आहे.

CSS @extend म्हणजे काय?

@extend हे एक CSS प्रीप्रोसेसर डायरेक्टिव्ह आहे जे तुम्हाला CSS प्रॉपर्टीजचा एक संच एका सिलेक्टरमधून दुसऱ्या सिलेक्टरमध्ये शेअर करण्याची परवानगी देते. हे प्रीप्रोसेसरला प्रभावीपणे सांगते: "अहो, मला या सिलेक्टरला त्या दुसऱ्या सिलेक्टरसाठी परिभाषित केलेल्या सर्व स्टाईल्स इनहेरिट करायच्या आहेत." यामुळे तुमच्या CSS कोडमधील अनावश्यक पुनरावृत्ती लक्षणीयरीत्या कमी होऊ शकते, देखभाल सुधारू शकते आणि तुमच्या वेबसाइट किंवा ॲप्लिकेशनमध्ये अधिक सुसंगत डिझाइन भाषेला प्रोत्साहन मिळू शकते.

मूळ संकल्पना: इनहेरिटन्स विरुद्ध एक्सटेंशन

@extend आणि स्टँडर्ड CSS इनहेरिटन्समध्ये फरक करणे महत्त्वाचे आहे. CSS इनहेरिटन्स, कॅस्केडद्वारे परिभाषित केल्याप्रमाणे, काही प्रॉपर्टीज (जसे की color, font-family, आणि text-align) पॅरेंट एलिमेंट्सकडून त्यांच्या चाइल्ड एलिमेंट्सकडे पाठवते. तथापि, इनहेरिटन्सला मर्यादा आहेत. हे border, margin, किंवा padding सारख्या प्रॉपर्टीजवर लागू होत नाही. शिवाय, पॅरेंट आणि चाइल्ड यांच्यातील संबंध महत्त्वाचा असतो; HTML मध्ये पॅरेंट-चाइल्ड संबंधांशिवाय, इनहेरिटन्स होऊ शकत नाही. दुसरीकडे, @extend स्टाईलशीट स्तरावर कार्य करते. याला HTML स्ट्रक्चरची पर्वा नसते. ते एका सिलेक्टरच्या प्रॉपर्टीज थेट दुसऱ्यामध्ये टाकते, त्यांच्या HTML संबंधांची पर्वा न करता.

@extend चे सिंटॅक्स

@extend चे सिंटॅक्स अगदी सोपे आहे:

            .selector-to-extend {
  @extend .selector-to-inherit;
}

            

              
                Copy
              
            
          

येथे, .selector-to-extend हे .selector-to-inherit साठी परिभाषित केलेल्या सर्व CSS प्रॉपर्टीज इनहेरिट करेल. प्रीप्रोसेसर हा कोड कंपाइल केल्यानंतर, परिणामी CSS मध्ये .selector-to-inherit च्या प्रॉपर्टीज .selector-to-extend ला लागू केलेल्या दिसतील.

@extend चे उपयोग

@extend अशा परिस्थितीत विशेषतः मौल्यवान ठरते जिथे तुम्हाला मूळ स्टाईलचे व्हेरिएशन्स तयार करायचे असतात किंवा अनेक एलिमेंट्समध्ये सुसंगतता राखायची असते. येथे काही सामान्य उपयोग आहेत:

१. बटण स्टाईल्स

समजा तुमच्याकडे एक मूळ बटण स्टाईल आहे:

            .button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

आता, तुम्हाला वेगवेगळी बटण व्हेरिएशन्स तयार करायची आहेत, जसे की प्रायमरी बटण आणि सेकंडरी बटण:

            .button-primary {
  @extend .button;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  @extend .button;
  background-color: #6c757d;
  color: white;
}

            

              
                Copy
              
            
          

कंपाइल केलेला CSS काहीसा असा दिसेल:

            .button,
.button-primary,
.button-secondary {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.button-primary {
  background-color: #007bff;
  color: white;
}

.button-secondary {
  background-color: #6c757d;
  color: white;
}

            

              
                Copy
              
            
          

लक्षात घ्या की .button मध्ये परिभाषित केलेल्या सामान्य स्टाईल्स .button-primary आणि .button-secondary या दोन्हींना लागू होतात. यामुळे कोडची पुनरावृत्ती कमी होते आणि मूळ बटण स्टाईल अपडेट करणे सोपे होते, कारण बदल आपोआप सर्व एक्सटेंडेड बटणांवर लागू होतात.

२. फॉर्म एलिमेंट स्टाईल्स

फॉर्म्सना अनेकदा विविध इनपुट प्रकारांमध्ये सुसंगत स्टायलिंगची आवश्यकता असते. तुम्ही @extend वापरून एक मूळ इनपुट स्टाईल परिभाषित करू शकता आणि नंतर विशिष्ट इनपुट प्रकारांसाठी ती एक्सटेंड करू शकता:

            .form-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
}

.form-input-text {
  @extend .form-input;
}

.form-input-email {
  @extend .form-input;
}

.form-input-textarea {
  @extend .form-input;
  height: 100px;
}

            

              
                Copy
              
            
          

हा दृष्टिकोन सुनिश्चित करतो की सर्व फॉर्म इनपुट एक सुसंगत मूळ स्टाईल शेअर करतात आणि आवश्यकतेनुसार विशिष्ट इनपुट प्रकारांना सानुकूलित करण्याची परवानगी देतो.

३. अलर्ट मेसेजेस

अलर्ट मेसेजेस (सक्सेस, वॉर्निंग, एरर) मध्ये अनेकदा सामान्य स्टायलिंग असते. @extend सुसंगतता राखण्यात मदत करू शकते:

            .alert {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.alert-success {
  @extend .alert;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-warning {
  @extend .alert;
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.alert-error {
  @extend .alert;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

            

              
                Copy
              
            
          

४. ग्रिड सिस्टीम्स

आधुनिक CSS ग्रिड आणि फ्लेक्सबॉक्स शक्तिशाली लेआउट क्षमता देत असले तरी, तुम्हाला जुन्या ग्रिड सिस्टीमवर अवलंबून असलेले लेगसी कोडबेस आढळू शकतात. शेअर केलेल्या कॉलम स्टाईल्सवर आधारित अधिक सुलभ ग्रिड सिस्टीम तयार करण्यासाठी @extend वापरले जाऊ शकते.

            .col {
  float: left;
  padding: 10px;
}

.col-1 {
  @extend .col;
  width: 8.33%;
}

.col-2 {
  @extend .col;
  width: 16.66%;
}

/* ...and so on up to .col-12 */

            

              
                Copy
              
            
          

@extend वापरण्याचे फायदे

• कोडची पुनरावृत्ती कमी: @extend मुळे एकाच CSS प्रॉपर्टीज अनेक सिलेक्टर्ससाठी वारंवार लिहिण्याची गरज नाहीशी होते.
• सुधारित देखभाल (Maintainability): मूळ स्टाईलमधील बदल सर्व एक्सटेंडेड स्टाईल्समध्ये आपोआप दिसतात, ज्यामुळे अपडेट्स सोपे होतात आणि सुसंगतता सुनिश्चित होते.
• वाढीव सुसंगतता: @extend संबंधित एलिमेंट्समध्ये स्टाईल्सचा एक सामान्य संच शेअर करून तुमच्या वेबसाइट किंवा ॲप्लिकेशनमध्ये एक सुसंगत डिझाइन लँग्वेजला प्रोत्साहन देते.
• अधिक संघटित स्टाईलशीट्स: @extend वापरल्याने CSS मध्ये मॉड्युलर दृष्टिकोनाला प्रोत्साहन मिळते, जिथे स्टाईल्स तार्किकदृष्ट्या गटबद्ध आणि पुन्हा वापरल्या जातात.
• सिमँटिक CSS: दृश्य स्वरूपाऐवजी उद्देशावर आधारित क्लासेस एक्सटेंड करून, तुम्ही अधिक सिमँटिक आणि समजण्यायोग्य कोडबेस तयार करता.

@extend चे तोटे आणि संभाव्य धोके

@extend चे अनेक महत्त्वपूर्ण फायदे असले तरी, त्याचे संभाव्य तोटे जाणून घेणे आवश्यक आहे:

• वाढलेली स्पेसिफिसिटी: @extend तुमच्या सिलेक्टर्सची स्पेसिफिसिटी वाढवू शकते, ज्यामुळे नंतर स्टाईल्स ओव्हरराइड करणे अधिक कठीण होऊ शकते. कारण प्रीप्रोसेसर CSS कंपाइल करताना सिलेक्टर्सना प्रभावीपणे एकत्र करतो.
• अनपेक्षित आउटपुट: जर तुम्ही सावधगिरी बाळगली नाही, तर @extend अनपेक्षित CSS आउटपुट तयार करू शकते, विशेषतः गुंतागुंतीच्या सिलेक्टर हायरार्कीमध्ये. तुमच्या हेतूंशी जुळत असल्याची खात्री करण्यासाठी कंपाइल केलेला CSS पूर्णपणे तपासणे महत्त्वाचे आहे.
• अतिवापर: @extend चा जास्त वापर केल्याने स्टाईलशीट गुंतागुंतीची आणि समजण्यास कठीण होऊ शकते. त्याचा वापर हुशारीने आणि केवळ स्पष्ट फायदा होत असेल तेव्हाच करणे महत्त्वाचे आहे.
• लपलेले अवलंबित्व (Dependencies): एक्सटेंड करणारा सिलेक्टर आणि एक्सटेंडेड सिलेक्टर यांच्यातील अवलंबित्व लगेच स्पष्ट होऊ शकत नाही, ज्यामुळे रिफॅक्टरिंग करताना गोंधळ होऊ शकतो.
• अनावश्यक स्टाईल्सची शक्यता: तुम्ही एक्सटेंड करत असलेल्या सिलेक्टरमध्ये अनेक प्रॉपर्टीज परिभाषित असल्यास, परंतु तुम्हाला फक्त काहीच आवश्यक असल्यास, एक्सटेंड करणारा सिलेक्टर त्या सर्व प्रॉपर्टीज इनहेरिट करेल, ज्यामुळे अनावश्यक कोड तयार होऊ शकतो.

@extend वापरण्यासाठी सर्वोत्तम पद्धती

@extend चा प्रभावीपणे वापर करण्यासाठी आणि त्याचे धोके टाळण्यासाठी, खालील सर्वोत्तम पद्धतींचा विचार करा:

१. @extend चा वापर हुशारीने करा

@extend चा अतिवापर करू नका. त्याचा वापर तेव्हाच करा जेव्हा कोड कमी करणे, देखभाल किंवा सुसंगततेच्या दृष्टीने स्पष्ट फायदा होत असेल. तुम्ही फक्त एक किंवा दोन प्रॉपर्टीज शेअर करत असाल, तर प्रत्येक सिलेक्टरमध्ये त्या थेट परिभाषित करणे सोपे असू शकते.

२. सिलेक्टर्स सोपे ठेवा

गुंतागुंतीच्या हायरार्की असलेल्या जटिल सिलेक्टर्सना एक्सटेंड करणे टाळा. यामुळे स्पेसिफिसिटी वाढू शकते आणि अनपेक्षित आउटपुट येऊ शकते. सोप्या, सु-परिभाषित मूळ स्टाईल्स एक्सटेंड करण्यावर भर द्या.

३. कंपाइल केलेला CSS तपासा

@extend तुमच्या अपेक्षेप्रमाणे आउटपुट तयार करत आहे याची खात्री करण्यासाठी नेहमी कंपाइल केलेला CSS तपासा. सिलेक्टर स्पेसिफिसिटी आणि स्टाईल्सच्या क्रमाकडे लक्ष द्या.

४. प्लेसहोल्डर सिलेक्टर्स वापरा

प्लेसहोल्डर सिलेक्टर्स (सायलेंट क्लासेस म्हणूनही ओळखले जातात) हे एक विशेष प्रकारचे सिलेक्टर आहेत जे फक्त @extend सोबत वापरले जातात. ते % प्रीफिक्सने परिभाषित केले जातात आणि जोपर्यंत ते एक्सटेंड केले जात नाहीत तोपर्यंत कंपाइल केलेल्या CSS मध्ये समाविष्ट होत नाहीत. यामुळे अनावश्यक CSS नियम तयार करणे टाळता येते.

            %base-button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.button-primary {
  @extend %base-button;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  @extend %base-button;
  background-color: #6c757d;
  color: white;
}

            

              
                Copy
              
            
          

या उदाहरणात, %base-button कंपाइल केलेल्या CSS मध्ये समाविष्ट होणार नाही जोपर्यंत तो .button-primary किंवा .button-secondary द्वारे एक्सटेंड केला जात नाही.

५. पर्यायांचा विचार करा

@extend वापरण्यापूर्वी, अधिक योग्य ठरू शकतील अशा पर्यायी दृष्टिकोनांचा विचार करा. उदाहरणार्थ, स्टाईल्स शेअर करण्यासाठी तुम्ही मिक्सिन्स (CSS प्रीप्रोसेसरचे आणखी एक वैशिष्ट्य) वापरू शकता. मिक्सिन्स @extend पेक्षा अधिक लवचिकता देतात, कारण ते आर्गुमेंट्स स्वीकारू शकतात आणि त्या आर्गुमेंट्सवर आधारित वेगवेगळे CSS आउटपुट तयार करू शकतात. तुम्ही शेअर केलेल्या व्हॅल्यूजसाठी CSS व्हेरिएबल्स (कस्टम प्रॉपर्टीज) वापरण्याचाही विचार करू शकता.

६. तुमचा वापर डॉक्युमेंट करा

@extend वापरताना, कोणते सिलेक्टर्स कशाला एक्सटेंड करत आहेत आणि या निवडीमागील कारणे स्पष्टपणे डॉक्युमेंट करा. यामुळे तुमची स्टाईलशीट तुम्हाला आणि इतर डेव्हलपर्सना समजण्यास आणि मेंटेन करण्यास सोपी जाईल.

वेगवेगळ्या CSS प्रीप्रोसेसरमधील @extend

Sass (@extend)

Sass (Syntactically Awesome Stylesheets) हा एक लोकप्रिय CSS प्रीप्रोसेसर आहे जो @extend ला पूर्णपणे सपोर्ट करतो. या मार्गदर्शकामध्ये दिलेली उदाहरणे प्रामुख्याने Sass सिंटॅक्सवर आधारित आहेत.

Less (Extend)

Less (Leaner Style Sheets) देखील extend वापरून स्टाईल इनहेरिटन्सला सपोर्ट करते (येथे "@" चिन्ह नाही हे लक्षात घ्या). त्याचे सिंटॅक्स Sass सारखेच आहे:

            .selector-to-extend {
  &:extend(.selector-to-inherit);
}

            

              
                Copy
              
            
          

&:extend() सिंटॅक्स हे Less साठी विशिष्ट आहे. & हे सध्याच्या सिलेक्टरला सूचित करते.

Stylus

Stylus देखील अशीच कार्यक्षमता प्रदान करते, जरी त्याचे सिंटॅक्स वेगळे असले तरी. तुम्ही @extend डायरेक्टिव्ह वापरून स्टाईल इनहेरिटन्स मिळवू शकता, परंतु इच्छित परिणाम साधण्यासाठी त्यात अनेकदा अधिक गुंतागुंतीचे मिक्सिन्स समाविष्ट असतात.

@extend चे पर्याय

@extend उपयुक्त असले तरी, अनेक पर्याय आहेत जे वेगवेगळे फायदे-तोटे देतात आणि काही विशिष्ट परिस्थितीत अधिक योग्य असू शकतात:

• मिक्सिन्स: मिक्सिन्स कोडचे पुन्हा वापरता येणारे ब्लॉक्स आहेत ज्यात CSS प्रॉपर्टीज, व्हेरिएबल्स आणि इतर मिक्सिन्स देखील समाविष्ट असू शकतात. ते @extend पेक्षा अधिक लवचिकता देतात कारण ते आर्गुमेंट्स स्वीकारू शकतात.
• CSS व्हेरिएबल्स (कस्टम प्रॉपर्टीज): CSS व्हेरिएबल्स तुम्हाला पुन्हा वापरता येण्याजोग्या व्हॅल्यूज परिभाषित करण्याची परवानगी देतात ज्या तुमच्या संपूर्ण स्टाईलशीटमध्ये वापरल्या जाऊ शकतात. हे रंग, फॉन्ट आणि इतर डिझाइन टोकन्स व्यवस्थापित करण्यासाठी विशेषतः उपयुक्त आहे.
• युटिलिटी क्लासेस: युटिलिटी क्लासेस हे लहान, एकल-उद्देशीय CSS क्लासेस आहेत जे अधिक गुंतागुंतीच्या स्टाईल्स तयार करण्यासाठी एकत्र केले जाऊ शकतात. हा दृष्टिकोन पुन्हा वापरण्यास प्रोत्साहन देतो आणि Tailwind CSS किंवा Bootstrap सारख्या CSS फ्रेमवर्कसह वापरल्यास विशेषतः प्रभावी ठरू शकतो. उदाहरणार्थ, .button क्लास एक्सटेंड करण्याऐवजी, तुम्ही इच्छित स्पेसिंग आणि स्वरूप प्राप्त करण्यासाठी .padding-10, .margin-bottom-15, आणि .rounded-4 सारखे युटिलिटी क्लासेस लागू करू शकता.
• घटक-आधारित आर्किटेक्चर (Component-Based Architecture): आधुनिक फ्रंट-एंड डेव्हलपमेंटमध्ये अनेकदा घटक-आधारित आर्किटेक्चरवर जोर दिला जातो, जिथे UI एलिमेंट्सना त्यांच्या स्वतःच्या स्टाईल्ससह स्वयंपूर्ण युनिट्स म्हणून हाताळले जाते. हा दृष्टिकोन प्रत्येक घटकामध्ये स्टाईल्स समाविष्ट करून @extend ची गरज कमी करू शकतो.

@extend विरुद्ध मिक्सिन्स: एक जवळून नजर

@extend आणि मिक्सिन्स यांच्यातील निवड अनेकदा विशिष्ट वापराच्या केस आणि वैयक्तिक पसंतीवर अवलंबून असते. येथे एक तुलना आहे:

वास्तविक-जगातील उदाहरणे आणि आंतरराष्ट्रीय विचार

@extend चे तांत्रिक पैलू जागतिक स्तरावर सुसंगत असले तरी, सांस्कृतिक डिझाइन प्राधान्ये आणि प्रादेशिक वेब डेव्हलपमेंट पद्धतींनुसार त्याचा वापर बदलू शकतो. येथे काही उदाहरणे आहेत:

• उजवीकडून-डावीकडे (RTL) भाषा: अरबी किंवा हिब्रू सारख्या RTL भाषांसाठी वेबसाइट विकसित करताना, दिशा-विशिष्ट स्टाईल्स व्यवस्थापित करण्यासाठी @extend कसे वापरले जाऊ शकते याचा विचार करा. उदाहरणार्थ, तुम्ही मार्जिन, पॅडिंग आणि फ्लोट प्रॉपर्टीजसाठी RTL-विशिष्ट ओव्हरराइड्ससह मूळ लेआउट क्लास एक्सटेंड करू शकता.
• वेगवेगळे डिझाइन ट्रेंड्स: वेगवेगळ्या प्रदेशांमध्ये डिझाइन ट्रेंड्स बदलतात. काही प्रदेशांमध्ये मिनिमलिस्ट डिझाइन अधिक प्रचलित आहेत, तर इतरांना अधिक समृद्ध आणि विस्तृत इंटरफेस आवडतात. @extend एकूण सौंदर्याचा विचार न करता, एका विशिष्ट डिझाइन लँग्वेजमध्ये सुसंगतता राखण्यात मदत करू शकते.
• ॲक्सेसिबिलिटी: तुमच्या @extend वापराचा ॲक्सेसिबिलिटीवर नकारात्मक परिणाम होणार नाही याची खात्री करा. उदाहरणार्थ, तुम्ही स्क्रीन रीडरसाठी महत्त्वाचा सिमेंटिक अर्थ प्रदान करणारा क्लास एक्सटेंड करत असल्यास, एक्सटेंड करणारा क्लास तो अर्थ कायम ठेवतो याची खात्री करा. आवश्यक असल्यास अतिरिक्त संदर्भ देण्यासाठी ARIA ॲट्रिब्यूट्स वापरण्याचा विचार करा.
• परफॉर्मन्स: @extend च्या संभाव्य परफॉर्मन्स परिणामांबद्दल जागरूक रहा, विशेषतः मोठ्या स्टाईलशीट्समध्ये. @extend चा अतिवापर CSS फाईलचा आकार वाढवू शकतो आणि रेंडरिंगची वेळ कमी करू शकतो. कोणत्याही परफॉर्मन्समधील अडथळे ओळखण्यासाठी आणि त्यांचे निराकरण करण्यासाठी नियमितपणे तुमच्या CSS चे ऑडिट करा.
• फ्रेमवर्कचा अवलंब: वेगवेगळ्या CSS फ्रेमवर्क्सची (उदा., Bootstrap, Tailwind CSS, Materialize) लोकप्रियता वेगवेगळ्या प्रदेशांमध्ये बदलते. तुमच्या लक्ष्य बाजारात वापरल्या जाणाऱ्या फ्रेमवर्क्सच्या नियमावली आणि सर्वोत्तम पद्धतींबद्दल जागरूक रहा आणि त्यानुसार तुमच्या @extend वापरामध्ये बदल करा.

निष्कर्ष

@extend हे तुमच्या CSS स्टाईलशीट्समध्ये कोडचा पुन्हा वापर, देखभाल आणि सुसंगतता यांना प्रोत्साहन देण्यासाठी एक शक्तिशाली साधन आहे. त्याचे सिंटॅक्स, उपयोग, फायदे आणि तोटे समजून घेऊन, तुम्ही अधिक कार्यक्षम आणि संघटित CSS कोड तयार करण्यासाठी त्याचा प्रभावीपणे वापर करू शकता. तथापि, @extend चा वापर हुशारीने करणे आणि योग्य असेल तेव्हा पर्यायी दृष्टिकोनांचा विचार करणे महत्त्वाचे आहे. या मार्गदर्शकामध्ये नमूद केलेल्या सर्वोत्तम पद्धतींचे पालन करून, तुम्ही @extend मध्ये प्रभुत्व मिळवू शकता आणि तुमच्या वेब प्रकल्पांसाठी सुलभ आणि स्केलेबल स्टाईलशीट्स तयार करू शकता.

@extend अपेक्षेप्रमाणे काम करत आहे याची खात्री करण्यासाठी नेहमी कंपाइल केलेला CSS तपासा आणि तुमच्या कोडची पूर्णपणे चाचणी करा. @extend ला इतर CSS प्रीप्रोसेसर वैशिष्ट्ये आणि सर्वोत्तम पद्धतींसह एकत्र करून, तुम्ही तुमच्या वेबसाइट किंवा ॲप्लिकेशनसाठी एक मजबूत आणि कार्यक्षम CSS आर्किटेक्चर तयार करू शकता.